<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省/兵团管理 - 新疆奎木星测控技术有限公司</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <style>
        body {
            margin: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f7fa;
        }
        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .toolbar {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .data-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .search-form {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        .statistics-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>省/兵团管理</h1>
            <p>省级行政区域和新疆生产建设兵团管理系统</p>
        </div>
        
        <div class="container">
            <!-- 统计卡片 -->
            <div class="statistics-cards">
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalProvinces }}</div>
                    <div class="stat-label">省/兵团总数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalCities }}</div>
                    <div class="stat-label">下辖市级单位</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalCounties }}</div>
                    <div class="stat-label">下辖区县单位</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalTowns }}</div>
                    <div class="stat-label">下辖乡镇单位</div>
                </div>
            </div>
            
            <!-- 工具栏 -->
            <div class="toolbar">
                <div class="search-form">
                    <el-input
                        v-model="searchKeyword"
                        placeholder="搜索省/兵团名称或代码"
                        style="width: 300px;"
                        clearable
                        @input="handleSearch"
                    >
                        <template #prefix>
                            <el-icon><Search /></el-icon>
                        </template>
                    </el-input>
                    <el-select v-model="searchType" placeholder="选择类型" style="width: 150px;" @change="handleSearch">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="省" value="province"></el-option>
                        <el-option label="兵团" value="corps"></el-option>
                    </el-select>
                </div>
                <div>
                    <el-button type="primary" @click="showAddDialog">新增省/兵团</el-button>
                    <el-button type="success" @click="exportData">导出数据</el-button>
                </div>
            </div>
            
            <!-- 数据表格 -->
            <div class="data-card">
                <el-table :data="filteredProvinces" style="width: 100%" v-loading="loading">
                    <el-table-column prop="code" label="代码" width="100"></el-table-column>
                    <el-table-column prop="name" label="名称" width="200"></el-table-column>
                    <el-table-column prop="type" label="类型" width="100">
                        <template #default="scope">
                            <el-tag :type="scope.row.type === 'province' ? 'primary' : 'success'">
                                {{ scope.row.type === 'province' ? '省' : '兵团' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="short_name" label="简称" width="100"></el-table-column>
                    <el-table-column prop="capital" label="省会/总部" width="150"></el-table-column>
                    <el-table-column prop="area" label="面积(万km²)" width="120">
                        <template #default="scope">
                            <span>{{ scope.row.area.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="population" label="人口(万人)" width="120">
                        <template #default="scope">
                            <span>{{ scope.row.population.toFixed(0) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cities_count" label="下辖市数" width="100"></el-table-column>
                    <el-table-column prop="counties_count" label="下辖县数" width="100"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                                {{ scope.row.status === 'active' ? '启用' : '禁用' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at" label="创建时间" width="150"></el-table-column>
                    <el-table-column label="操作" width="200" fixed="right">
                        <template #default="scope">
                            <el-button size="small" @click="viewDetails(scope.row)">详情</el-button>
                            <el-button size="small" type="primary" @click="editProvince(scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="deleteProvince(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <!-- 分页组件 -->
                <el-pagination
                    v-model:current-page="pagination.currentPage"
                    v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    style="margin-top: 20px; text-align: right;"
                >
                </el-pagination>
            </div>
        </div>
        
        <!-- 新增/编辑对话框 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="600px"
            @close="resetForm"
        >
            <el-form :model="provinceForm" :rules="formRules" ref="provinceFormRef" label-width="120px">
                <el-form-item label="代码" prop="code">
                    <el-input v-model="provinceForm.code" placeholder="请输入省/兵团代码"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="provinceForm.name" placeholder="请输入省/兵团名称"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-select v-model="provinceForm.type" placeholder="选择类型">
                        <el-option label="省" value="province"></el-option>
                        <el-option label="兵团" value="corps"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="简称" prop="short_name">
                    <el-input v-model="provinceForm.short_name" placeholder="请输入简称"></el-input>
                </el-form-item>
                <el-form-item label="省会/总部" prop="capital">
                    <el-input v-model="provinceForm.capital" placeholder="请输入省会或总部所在地"></el-input>
                </el-form-item>
                <el-form-item label="面积(万km²)" prop="area">
                    <el-input-number v-model="provinceForm.area" :min="0" :precision="2" placeholder="请输入面积"></el-input-number>
                </el-form-item>
                <el-form-item label="人口(万人)" prop="population">
                    <el-input-number v-model="provinceForm.population" :min="0" :precision="0" placeholder="请输入人口数量"></el-input-number>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="provinceForm.status" placeholder="选择状态">
                        <el-option label="启用" value="active"></el-option>
                        <el-option label="禁用" value="inactive"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="provinceForm.remarks" type="textarea" :rows="3" placeholder="请输入备注信息"></el-input>
                </el-form-item>
            </el-form>
            
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveProvince">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;
        
        createApp({
            data() {
                return {
                    loading: false,
                    searchKeyword: '',
                    searchType: '',
                    dialogVisible: false,
                    isEdit: false,
                    // 统计数据
                    statistics: {
                        totalProvinces: 35,
                        totalCities: 334,
                        totalCounties: 2851,
                        totalTowns: 40497
                    },
                    // 省/兵团数据
                    provinces: [
                        {
                            id: 1,
                            code: '650000',
                            name: '新疆维吾尔自治区',
                            type: 'province',
                            short_name: '新',
                            capital: '乌鲁木齐市',
                            area: 166.49,
                            population: 2585.23,
                            cities_count: 14,
                            counties_count: 68,
                            status: 'active',
                            created_at: '2024-01-01 00:00:00',
                            remarks: '新疆维吾尔自治区'
                        },
                        {
                            id: 2,
                            code: '659000',
                            name: '新疆生产建设兵团',
                            type: 'corps',
                            short_name: '兵团',
                            capital: '乌鲁木齐市',
                            area: 7.06,
                            population: 331.97,
                            cities_count: 9,
                            counties_count: 0,
                            status: 'active',
                            created_at: '2024-01-01 00:00:00',
                            remarks: '新疆生产建设兵团'
                        },
                        {
                            id: 3,
                            code: '110000',
                            name: '北京市',
                            type: 'province',
                            short_name: '京',
                            capital: '北京市',
                            area: 1.64,
                            population: 2188.60,
                            cities_count: 0,
                            counties_count: 16,
                            status: 'active',
                            created_at: '2024-01-01 00:00:00',
                            remarks: '首都北京市'
                        }
                    ],
                    // 表单数据
                    provinceForm: {
                        id: null,
                        code: '',
                        name: '',
                        type: '',
                        short_name: '',
                        capital: '',
                        area: null,
                        population: null,
                        status: 'active',
                        remarks: ''
                    },
                    // 表单验证规则
                    formRules: {
                        code: [{ required: true, message: '请输入代码', trigger: 'blur' }],
                        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
                        short_name: [{ required: true, message: '请输入简称', trigger: 'blur' }],
                        capital: [{ required: true, message: '请输入省会/总部', trigger: 'blur' }],
                        area: [{ required: true, message: '请输入面积', trigger: 'blur' }],
                        population: [{ required: true, message: '请输入人口', trigger: 'blur' }],
                        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
                    },
                    // 分页数据
                    pagination: {
                        currentPage: 1,
                        pageSize: 20,
                        total: 3
                    }
                };
            },
            
            computed: {
                dialogTitle() {
                    return this.isEdit ? '编辑省/兵团' : '新增省/兵团';
                },
                
                filteredProvinces() {
                    let filtered = this.provinces;
                    
                    if (this.searchKeyword) {
                        filtered = filtered.filter(item => 
                            item.name.includes(this.searchKeyword) || 
                            item.code.includes(this.searchKeyword)
                        );
                    }
                    
                    if (this.searchType) {
                        filtered = filtered.filter(item => item.type === this.searchType);
                    }
                    
                    return filtered;
                }
            },
            
            methods: {
                /**
                 * 搜索处理
                 */
                handleSearch() {
                    this.pagination.currentPage = 1;
                },
                
                /**
                 * 显示新增对话框
                 */
                showAddDialog() {
                    this.isEdit = false;
                    this.dialogVisible = true;
                },
                
                /**
                 * 查看详情
                 */
                viewDetails(row) {
                    ElMessage.info(`查看 ${row.name} 的详细信息`);
                    // 这里可以跳转到详情页面或显示详情对话框
                },
                
                /**
                 * 编辑省/兵团
                 */
                editProvince(row) {
                    this.isEdit = true;
                    this.provinceForm = { ...row };
                    this.dialogVisible = true;
                },
                
                /**
                 * 删除省/兵团
                 */
                deleteProvince(row) {
                    ElMessageBox.confirm(
                        `确定要删除 ${row.name} 吗？`,
                        '确认删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }
                    ).then(() => {
                        const index = this.provinces.findIndex(item => item.id === row.id);
                        if (index > -1) {
                            this.provinces.splice(index, 1);
                            ElMessage.success('删除成功');
                        }
                    }).catch(() => {
                        ElMessage.info('已取消删除');
                    });
                },
                
                /**
                 * 保存省/兵团
                 */
                saveProvince() {
                    this.$refs.provinceFormRef.validate((valid) => {
                        if (valid) {
                            if (this.isEdit) {
                                // 编辑模式
                                const index = this.provinces.findIndex(item => item.id === this.provinceForm.id);
                                if (index > -1) {
                                    this.provinces[index] = { ...this.provinceForm };
                                    ElMessage.success('更新成功');
                                }
                            } else {
                                // 新增模式
                                const newProvince = {
                                    ...this.provinceForm,
                                    id: Date.now(),
                                    cities_count: 0,
                                    counties_count: 0,
                                    created_at: new Date().toLocaleString()
                                };
                                this.provinces.push(newProvince);
                                ElMessage.success('新增成功');
                            }
                            this.dialogVisible = false;
                            this.resetForm();
                        }
                    });
                },
                
                /**
                 * 重置表单
                 */
                resetForm() {
                    this.provinceForm = {
                        id: null,
                        code: '',
                        name: '',
                        type: '',
                        short_name: '',
                        capital: '',
                        area: null,
                        population: null,
                        status: 'active',
                        remarks: ''
                    };
                    if (this.$refs.provinceFormRef) {
                        this.$refs.provinceFormRef.resetFields();
                    }
                },
                
                /**
                 * 导出数据
                 */
                exportData() {
                    ElMessage.success('数据导出功能开发中...');
                },
                
                /**
                 * 处理每页显示数量变化
                 */
                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.pagination.currentPage = 1;
                },
                
                /**
                 * 处理当前页码变化
                 */
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                }
            },
            
            mounted() {
                // 页面加载完成后的初始化操作
                this.pagination.total = this.provinces.length;
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>